<template>
  <el-card>
    <template #header>
      <h3>正倒计时</h3>
    </template>
    <ul>
      <li>
        <h3>倒计时</h3>
        <CountDownUp :duration="70000" @finish="onFinish" v-slot="timeObj">
          <span v-if="timeObj.hours">{{ timeObj.hours }}时</span>
          <span v-if="timeObj.minutes || timeObj.hours">{{ timeObj.minutes }}分</span>
          <span>{{ timeObj.seconds }}秒</span>
        </CountDownUp>
      </li>
      <li>
        <h3>正计时</h3>
        <CountDownUp :duration="0" countup v-slot="timeObj">
          <span v-if="timeObj.hours">{{ timeObj.hours }}时</span>
          <span v-if="timeObj.minutes || timeObj.hours">{{ timeObj.minutes }}分</span>
          <span>{{ timeObj.seconds }}秒</span>
        </CountDownUp>
      </li>
    </ul>
  </el-card>
</template>

<script lang="ts" setup>
const onFinish = () => {
  ElMessage.error('倒计时结束')
}
</script>
